<template>
  <div id="wd">
    <div id="wd-1">
      <h3>个人中心</h3>
    </div>
    <div id="wd-2">
        <div id="wd-2-1"  @click="fun()">
        <div id="wd-2-1-1">
          <img
            src="https://www.chawo.com/data/upload/shop/common/default_user_portrait.gif"
          />
        </div>
        <div id="wd-2-1-2">
          <p>请登录</p>
          <p>会员等级:普通会员</p>
        </div>
        <div id="wd-2-1-3">&gt;</div>
      </div>
      <!-- 我的订单 -->
      <div id="wd-2-2">
        <div id="wd-2-2-1">
          <div id="wd-2-2-2">
            <div id="box1">我的订单</div>
            <div id="box2">
              查看全部
              <span>&gt;</span>
            </div>
          </div>
          <div id="wd-2-2-3">
            <ul>
              <li>
                <span class="iconfont icon-Shapecopy"></span>
                <p>待付款</p>
              </li>
              <li>
                <span class="iconfont icon-daishouhuo"></span>
                <p>待收货</p>
              </li>
              <li>
                <span class="iconfont icon-daipingjia"></span>
                <p>待评价</p>
              </li>
              <li>
                <span class="iconfont icon-tuikuantuihuo"></span>
                <p>退款/退货</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 联系客服 -->
      <div id="wd-2-3">
        <ul>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-pinglun"></span>
              </div>
              <div id="box2">
                <a href="">联系客服</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-wodejifen"></span>
              </div>
              <div id="box2">
                <a href="">积分中心</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-dingdan"></span>
              </div>
              <div id="box2">
                <a href="">积分订单</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-shoucang"></span>
              </div>
              <div id="box2">
                <a href="">我的收藏</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-youhuiquan_huaban"></span>
              </div>
              <div id="box2">
                <a href="">代金券</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-liebiao"></span>
              </div>
              <div id="box2">
                <a href="">收货地址</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
          <li>
            <div id="lf">
              <div id="box1">
                <span class="iconfont icon-shezhi"></span>
              </div>
              <div id="box2">
                <a href="">设置</a>
              </div>
            </div>
            <div id="rg">&gt;</div>
          </li>
        </ul>
      </div>
      <!-- 客服电话 -->
      <div id="wd-2-4">
          <div id="wd-2-4-l">
              <p>客服电话:0871-66666655</p>
          </div>
          <div id="wd-2-4-r">
              <p>工作时间:09:00-23:00</p>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
        fun(){
            // 编程式导航   
            this.$router.push("/denglu")
        }
    }
};
</script>

<style scoped>
div {
  font-size: 0;
}
#wd {
  width: 100%;
  padding: 0.1rem;
  margin-bottom: .45rem;
}
#wd-1 {
  width: 100%;
  text-align: center;
}
#wd-1 h3 {
  font-size: 0.16rem;
}
#wd-2 {
  width: 100%;
  margin-top: 0.2rem;
}
#wd-2 a{
  color: black;
}
#wd-2-1 {
  padding: 0.1rem;
  height: 0.9rem;
  display: flex;
}
#wd-2-1-1 {
  height: 0.7rem;
}
#wd-2-1-1 img {
  width: 0.7rem;
  height: 0.7rem;
}
#wd-2-1-2 {
  height: 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#wd-2-1-2 p:nth-of-type(1) {
  font-size: 0.18rem;
  margin-bottom: 0.05rem;
  font-weight: 600;
}
#wd-2-1-2 p:nth-of-type(2) {
  font-size: 0.14rem;
  color: gray;
}
#wd-2-1-3 {
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.2rem;
  margin-left: 1.3rem;
  color: gray;
}
/* 我的订单 */
#wd-2-2 {
  width: 100%;
}
#wd-2-2-1 {
  padding: 0.1rem;
}
#wd-2-2-2 {
  height: 0.57rem;
  line-height: 0.57rem;
  border-top: 0.01rem solid gainsboro;
  border-bottom: gainsboro 0.01rem solid;
  display: flex;
  justify-content: space-between;
}
#wd-2-2-2 #box1 {
  font-size: 0.16rem;
}
#wd-2-2-2 #box2 {
  font-size: 0.16rem;
  color: gainsboro;
}
#wd-2-2-2 #box2 span {
  margin-left: 0.05rem;
}
#wd-2-2-3 {
  width: 100%;
  height: 0.72rem;
  border-bottom: 0.01rem solid gainsboro;
}
#wd-2-2-3 ul {
  width: 100%;
  height: 0.72rem;
  display: flex;
}
#wd-2-2-3 ul li {
  height: 0.72rem;
  width: 25%;
  text-align: center;
}
#wd-2-2-3 ul li span {
  font-size: 0.23rem;
  display: inline-block;
  margin-top: 0.15rem;
}
#wd-2-2-3 ul li p {
  font-size: 0.14rem;
  margin-top: 0.05rem;
}
#wd-2-3 {
  width: 100%;
  padding: 0.1rem;
}
#wd-2-3 ul {
  width: 100%;
}
#wd-2-3 ul li {
  height: 0.57rem;
  line-height: 0.57rem;
  border-bottom: 0.01rem solid gainsboro;
  display: flex;
  justify-content: space-between;
}
#wd-2-3 ul li span {
  font-size: 0.18rem;
}
#wd-2-3 ul li #box2 a {
  font-size: 0.14rem;
  color: gray;
  margin-left: 0.05rem;
}
#wd-2-3 ul li #rg {
  font-size: 0.2rem;
  color: gray;
}
#wd-2-3 ul li #lf {
  display: flex;
}
/* 客服电话 */
#wd-2-4{
    width: 100%;
    margin-top: .25rem;
    margin-bottom: .1rem;
    padding: 0 .2rem;
    justify-content: space-between;
    display: flex;
}
#wd-2-4-l{
    width: 50%;
}
#wd-2-4-l p{
    font-size: .12rem;
    color: gray;
}
#wd-2-4-r{
    width: 50%;
}
#wd-2-4-r p{
    font-size: .12rem;
    color: gray;
}
</style>
